<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>avc-ui 组件库文档</title>
    <style>
      /* 组件文档基础样式 */
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        line-height: 1.6;
        color: #333;
        margin: 0;
        padding: 0;
        background-color: #f9f9f9;
      }
      
      .component-docs-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        box-sizing: border-box;
      }
      
      h1, h2, h3 {
        color: #2c3e50;
        margin-top: 30px;
        margin-bottom: 15px;
      }
      
      h2 {
        font-size: 24px;
      }
      
      h3 {
        font-size: 20px;
      }
      
      p {
        margin: 10px 0;
      }
      
      a {
        color: #0077cc;
        text-decoration: none;
      }
      
      a:hover {
        text-decoration: underline;
      }
      
      /* 锚点链接样式 */
      .anchor-link {
        position: absolute;
        left: -20px;
        opacity: 0;
        transition: opacity 0.2s;
      }
      
      h2:hover .anchor-link,
      h3:hover .anchor-link {
        opacity: 0.5;
      }
      
      /* 布局样式 */
      .docs-layout {
        display: flex;
        gap: 30px;
        margin-top: 30px;
        flex-wrap: wrap;
      }
      
      /* 左侧目录样式 */
      .docs-nav {
        flex: 0 0 220px;
        background-color: #fff;
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        padding: 20px;
        position: sticky;
        top: 20px;
        height: fit-content;
      }
      
      .docs-nav h2 {
        font-size: 16px;
        margin-top: 0;
        margin-bottom: 15px;
      }
      
      .docs-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      
      .docs-nav li {
        margin: 8px 0;
      }
      
      .docs-nav a {
        display: block;
        padding: 6px 12px;
        border-radius: 4px;
        transition: all 0.2s;
      }
      
      .docs-nav a:hover,
      .docs-nav a.active {
        background-color: #e6f7ff;
        color: #0077cc;
      }
      
      /* 右侧内容样式 */
      .docs-content {
        flex: 1;
        background-color: white;
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        padding: 30px;
        min-width: 0; /* 防止内容溢出 */
      }
      
      /* 代码块样式 */
      pre {
        background-color: #f0f0f0;
        padding: 15px;
        border-radius: 6px;
        overflow-x: auto;
        margin: 20px 0;
        font-size: 14px;
      }
      
      code {
        background-color: #eee;
        padding: 2px 4px;
        border-radius: 4px;
        font-family: monospace;
      }
      
      /* 代码高亮样式 */
      .hljs {
        display: block;
        overflow-x: auto;
        background: #f0f0f0;
        color: #333;
        padding: 15px;
        border-radius: 6px;
        margin: 20px 0;
        font-size: 14px;
      }
      
      .hljs-comment { color: #999; }
      .hljs-keyword { color: #0077cc; }
      .hljs-string { color: #22bb22; }
      .hljs-number { color: #aa00ff; }
      .hljs-built_in { color: #0077cc; }
      .hljs-literal { color: #aa00ff; }
      .hljs-type { color: #0077cc; }
      .hljs-regexp { color: #e3116c; }
      .hljs-meta { color: #555; }
      
      /* 组件属性表格样式 */
      .table-container {
        margin: 20px 0;
        overflow-x: auto;
      }
      
      .component-props-table {
        width: 100%;
        border-collapse: collapse;
        background-color: #fff;
        font-size: 14px;
      }
      
      .component-props-table th,
      .component-props-table td {
        padding: 12px 16px;
        border: 1px solid #ddd;
        text-align: left;
        vertical-align: top;
      }
      
      .component-props-table th {
        background-color: #f5f5f5;
        font-weight: 600;
        white-space: nowrap;
      }
      
      .component-props-table tr:hover {
        background-color: #fafafa;
      }
      
      /* 属性类型标签 */
      .prop-type {
        background-color: #f0f0f0;
        color: #666;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 12px;
        font-family: monospace;
        margin-right: 4px;
      }
      
      /* 默认值样式 */
      .prop-default {
        background-color: #e6f7ff;
        color: #333;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 12px;
        font-family: monospace;
        margin-right: 4px;
      }
      
      /* 组件示例样式 */
      .code-example {
        margin: 20px 0;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        overflow: hidden;
      }
      
      .code-preview {
        padding: 20px;
        background-color: #fff;
        border-bottom: 1px solid #e0e0e0;
      }
      
      .example-container {
        min-height: 40px;
      }
      
      /* 表格容器 */
      .props-table-container {
        margin-top: 20px;
        overflow-x: auto;
      }
      
      /* 响应式设计 */
      @media (max-width: 768px) {
        .docs-layout {
          flex-direction: column;
        }
        
        .docs-nav {
          width: 100%;
          position: static;
          margin-bottom: 20px;
        }
      }
    </style>
    <script type="module">
      // 根据路径加载不同的入口文件
      const path = window.location.pathname;
      const script = document.createElement('script');
      script.type = 'module';
      
      if (path === '/component-docs') {
        script.src = '/src/component-docs.tsx';
      } else {
        script.src = '/src/main.tsx';
      }
      
      document.body.appendChild(script);
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>